<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-language" content="zh-CN">
  <meta name="format-detection" content="telephone=no">
  <link href="/static/img/logo500x500.png" rel="shortcut icon" sizes="500x500">
  <meta name="applicable-device" content="pc">
  <meta name="location" content="province=山东;city=青岛;coord=36.07,120.33">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <title>发布出租房源</title>
  <link rel="stylesheet" href="/static/my/fabu_files/common.css">
  <link rel="stylesheet" href="/static/my/fabu_files/index.css">
</head>

<body>


<div th:replace="common/head.html::banner(${user})"></div>
<div class="g-main" style="padding-bottom:0;margin-bottom:-45px;">
  <div class="m-jumbotron">
    <div class="tit">发布出租房源</div>
    <div class="sub-tit">房屋租赁平台尽力为您服务</div>
  </div>
  <div class="m-form">
    <div class="box-l m-entry">
      <dl>
        <dt>小区所在区域</dt>
        <dd>
          <span th:each="area:${areas}">
            <input type="radio"  name="place" th:id="${area.getId()}" th:value="${area.getArea()}">
            <label th:for="${area.getId()}" th:text="${area.getArea()}">市北</label>
          </span>
        </dd>
      </dl>
      <dl>
        <dt>详细地址</dt>
        <dd class="wrap-sug">
          <div class="u-sug" id="u-sug">
            <input id="area" class="sugInput" name="resblock" type="text" autocomplete="off" placeholder="请输入具体地址">
            <ul></ul>
          </div>
        </dd>
      </dl>

      <dl>
        <dt>出租价</dt>
        <dd>
          <input name="expect_price" id="price" type="number" placeholder="请输入您期望卖出的价格" autocomplete="off"
                 style="width: 210px;">
          <div class="unit">元/月</div>
          <a href="https://qd.lianjia.com/yezhu/gujia/" target="_blank" class="link-gujia"></a>
        </dd>
      </dl>
      <dl>
        <dt>标题</dt>
        <dd>
          <input name="owner_name" id="title" type="text" placeholder="请输入标题" autocomplete="off"
                 style="width: 250px;">
        </dd>
      </dl>
      <dl>
        <dt>房屋详情</dt>
        <dd>
          <input name="owner_mobile" id="inf"  type="text" placeholder="详情"
                 autocomplete="off" style="width: 250px;">
        </dd>
      </dl>

      <dl>
        <dt>租赁方式</dt>
        <dd>
          <div style="width: 146px; height: 40px; line-height: 40px;">
            <input type="radio" id="" name="type" value="整租" >整租
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 146px; height: 40px; line-height: 40px;">
            <input type="radio" id="" name="type" value="合租">合租
            <ul class="u-select-options hide"></ul>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>付款方式</dt>
        <dd>
          <div style="width: 146px; height: 40px; line-height: 40px;">
            <input type="radio" id="" name="payType" value="月付">月付
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 146px; height: 40px; line-height: 40px;">
            <input type="radio" id="" name="payType" value="季付" >季付
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 146px; height: 40px; line-height: 40px;">
            <input type="radio" id="" name="payType" value="年付">年付
            <ul class="u-select-options hide"></ul>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>交通情况</dt>
        <dd>
          <div style="width: 80px; height: 40px; line-height: 40px;">
            <input type="checkbox" name="trans" value="公交直达" />公交直达 </p>
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 80px; height: 40px; line-height: 40px;">
            <input type="checkbox" name="trans" value="地铁直达" />地铁直达 </p>
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 80px; height: 40px; line-height: 40px;">
            <input type="checkbox" name="trans" value="市区" />市区 </p>
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 80px; height: 40px; line-height: 40px;">
            <input type="checkbox" name="trans" value="郊区" />郊区 </p>
            <ul class="u-select-options hide"></ul>
          </div>
          <div style="width: 80px; height: 40px; line-height: 40px;">
            <input type="checkbox" name="trans" value="临近机场" />临近机场 </p>
            <ul class="u-select-options hide"></ul>
          </div>
         
        </dd>
      </dl>


    </div>
    <div class="box-r m-deal" style="text-align: center;display: block">
      <div style="display:inline;" onclick="driverUploadT()">
        <button  id="buttonT" type="button" class="btn btn-default" style="width:200px;
        height:150px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1);
        border-radius:8px;

        border:1px solid rgba(253,80,37,0.5)" >

          <img id="mainImage">
          <span style="font-size: 30px;color: #999999">+</span><br>
          <span style="width:144px;
height:17px;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:17px;
text-shadow:0px 2px 4px rgba(153,153,153,0.1);">请上传主图</span>

        </button>

      </div>

    </div>
    <div class="box-r m-deal" style="text-align: center;display: block;margin-top: 5%">
      <div style="display:inline;" onclick="driverUploadT2()">
        <button id="button2" type="button" class="btn btn-default" style="width:146px;
        height:79px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1);
        border-radius:8px;

        border:1px solid rgba(253,80,37,0.5)" >

          <img id="image2">
          <span style="font-size: 30px;color: #999999">+</span><br>
          <span style="width:144px;
height:17px;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:17px;
text-shadow:0px 2px 4px rgba(153,153,153,0.1);">请上传附图</span>

        </button>

      </div>
      <div style="display:inline;" onclick="driverUploadT3()">
        <button id="button3" type="button" class="btn btn-default" style="width:146px;
        height:79px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1);
        border-radius:8px;

        border:1px solid rgba(253,80,37,0.5)" >

          <img id="image3">
          <span style="font-size: 30px;color: #999999">+</span><br>
          <span style="width:144px;
height:17px;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:17px;
text-shadow:0px 2px 4px rgba(153,153,153,0.1);">请上传附图</span>

        </button>

      </div>
      <div style="display:inline;" onclick="driverUploadT4()">
        <button id="button4" type="button" class="btn btn-default" style="width:146px;
        height:79px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 4px 0px rgba(153,153,153,0.1);
        border-radius:8px;

        border:1px solid rgba(253,80,37,0.5)" >

          <img id="image4">
          <span style="font-size: 30px;color: #999999">+</span><br>
          <span style="width:144px;
height:17px;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:17px;
text-shadow:0px 2px 4px rgba(153,153,153,0.1);">请上传附图</span>

        </button>

      </div>


    </div>
    <input type="file" id="inputMain"  style="display: none" accept="image/*" onchange="imgPreview(this)">
    <input type="file" id="inputMain2"  style="display: none" accept="image/*" onchange="imgPreview2(this)">
    <input type="file" id="inputMain3"  style="display: none" accept="image/*" onchange="imgPreview3(this)">
    <input type="file" id="inputMain4"  style="display: none" accept="image/*" onchange="imgPreview4(this)">

  </div>


</div>
<div class="m-submit">
  <div class="wrap">
    <div class="btn-submit" onclick="submit()">发布</div>
  </div>
</div>

<script>
    function driverUploadT() {
        $('#inputMain').click(); // 模拟文件上传按钮点击操作
    }
    function imgPreview(fileDom) {
      //上传到服务器
        upload();
        //图片本地展示
        var file=$('#inputMain')[0].files[0]; //获取输入的文件
        var fileReader=new FileReader(); //调用浏览器文件读取器，读取上传的文件内容
        var url = window.URL || window.webkitURL || window.mozURL; //获取基地址
        var imgUrl=url.createObjectURL(file); //本地图片临时存放路径
        fileReader.readAsDataURL(file);
        fileReader.onload=function (ev) {
            var urldata=this.result;
            document.querySelector('#buttonT').style = "background:"+ "url(" + imgUrl + ")" + ";background-size:100% 100%;width:200px;height:150px";

        }


    }
    function upload() {
        var formData = new FormData(); //新建js表单，不采用<form>标签的原因：美观
        formData.append("files", $("#inputMain")[0].files[0]); //获取输入的文件
        //表单内容{“file”}
        var self = this;
        $.ajax({
            url: "/api/house/upload",
            type: "post",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            withCredentials: true,
            success: function (data) {
                if(data.code===200){
                  alert("上传成功")
                }
            }
        })
    }

</script>
<script>
    function driverUploadT2() {
        $('#inputMain2').click(); // 模拟文件上传按钮点击操作
    }
    function imgPreview2(fileDom) {
        upload2();
        var file=$('#inputMain2')[0].files[0];
        var fileReader=new FileReader();
        var url = window.URL || window.webkitURL || window.mozURL;
        var imgUrl=url.createObjectURL(file);
        fileReader.readAsDataURL(file);
        fileReader.onload=function (ev) {
            var urldata=this.result;
            document.querySelector('#button2').style = "background:"+ "url(" + imgUrl + ")" + ";background-size:100% 100%;width:146px;height:49px";

        }


    }
    function upload2() {
        var formData = new FormData();
        formData.append("files", $("#inputMain2")[0].files[0]);
        var self = this;
        $.ajax({
            url: "/api/house/upload",
            type: "post",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            withCredentials: true,
            success: function (data) {
              if(data.code===200){
                alert("上传成功")
              }
            }
        })
    }

</script>
<script>
    function driverUploadT3() {
        $('#inputMain3').click(); // 模拟文件上传按钮点击操作
    }
    function imgPreview3(fileDom) {
        upload3();
        var file=$('#inputMain3')[0].files[0];
        var fileReader=new FileReader();
        var url = window.URL || window.webkitURL || window.mozURL;
        var imgUrl=url.createObjectURL(file);
        fileReader.readAsDataURL(file);
        fileReader.onload=function (ev) {
            var urldata=this.result;
            document.querySelector('#button3').style = "background:"+ "url(" + imgUrl + ")" + ";background-size:100% 100%;width:146px;height:49px";

        }

    }
    function upload3() {
        var formData = new FormData();
        formData.append("files", $("#inputMain3")[0].files[0]);
        var self = this;
        $.ajax({
            url: "/api/house/upload",
            type: "post",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            withCredentials: true,
            success: function (data) {
              if(data.code===200){
                alert("上传成功")
              }
            }
        })
    }

</script>
<script>
    function driverUploadT4() {
        $('#inputMain4').click(); // 模拟文件上传按钮点击操作
    }
    function imgPreview4(fileDom) {
        upload4();
        var file=$('#inputMain4')[0].files[0];
        var fileReader=new FileReader();
        var url = window.URL || window.webkitURL || window.mozURL;
        var imgUrl=url.createObjectURL(file);
        fileReader.readAsDataURL(file);
        fileReader.onload=function (ev) {
            var urldata=this.result;
            document.querySelector('#button4').style = "background:"+ "url(" + imgUrl + ")" + ";background-size:100% 100%;width:146px;height:49px";

        }

    }
    function upload4() {
        var formData = new FormData();
        formData.append("files", $("#inputMain2")[0].files[0]);
        var self = this;
        $.ajax({
            url: "/api/house/upload",
            type: "post",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
            contentType: false, // 不设置内容类型
            withCredentials: true,
            success: function (data) {
              if(data.code===200){
                alert("上传成功")
              }
            }
        })
    }

</script>

<script>
  function submit() {
      var place = $('input[name=place]:checked').val();
      var area=$('#area').val();
      var price=$('#price').val();
      var title=$("#title").val();
      var inf=$('#inf').val();
      var type = $('input[name=type]:checked').val();
      var payType = $('input[name=payType]:checked').val();

      var id_array=new Array();
      $('input[name="trans"]:checked').each(function(){
          id_array.push($(this).val());//向数组中添加元素
      });

      var tag= id_array.join(',');

      $.ajax({
          url:'/house/donewhouse',
          type:'POST',
          dataType:'json',
          data:{title:title,place:place,area:area,price:price,inf:inf,type:type,payType:payType,tag:tag},
          success:function(data){
              alert("上传成功，请耐心等待管理员审核！");
              location.replace("/house/houselist");
          },
          error:function(status){
              //todo:失败后执行的代码
          }
      });

  }
</script>
</body>
</html>